const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        allprice: 0,
        count: 1
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 59.00,
        allprice: 0,
        count: 1
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2006-9',
        price: 85.00,
        allprice: 0,
        count: 1
      },
      {
        id: 4,
        name: '《Python学习大全》',
        date: '2002-1',
        price: 185.00,
        allprice: 0,
        count: 1
      },
      {
        id: 5,
        name: '《C语言程序设计》',
        date: '2002-9',
        price: 85.00,
        allprice: 0,
        count: 1
      }
    ]
  },

  methods: {
    // 格式化价格
    getFinalPrice(price) {
      return '￥' + price.toFixed(2);
    },

    // 通过下标控制书籍数量 --
    sub(index) {
      let thisObj = this.books[index];
      thisObj.allprice = thisObj.price * --thisObj.count;
    },

    // 书籍数量 ++
    add(index) {
      let thisObj = this.books[index];
      thisObj.allprice = thisObj.price * ++thisObj.count;
    },

    // 移除指定书籍 
    removeHandle(index) {
      this.books.splice(index, 1);
    }
  },

  // 过滤器
  filters: {
    // 直接 | 使用指定过滤器即可，前面的变量会作为参数传递进入
    showPrice(price) {
      return '￥' + price.toFixed(2);
    }
  },

  // 计算属性
  computed: {
    totalPrice() {
      return this.books.reduce((prev, item) => prev + item.allprice, 0);
    }
  },

  // 创建组件时调用
  created() {
    this.books.map(item => {
      item.allprice = item.price * item.count;
    })
  }
})